<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" class="inputEl"> <br>
    <input type="text" class="inputEl2">
    <script>
        function debounce(func, wait) {
            return (...args) => {
                func.timer && clearTimeout(func.timer)
                func.timer = setTimeout(() => {
                    func.apply(this, args)
                }, wait)
            }
        }
        document.querySelector(".inputEl").addEventListener('input', debounce((e) => {
            console.log(e.target, this) // 时间对象和this都是正确的
        }, 1000))



        function throttle(func, wait) {
            let last, deferTimer
            return (...args) => {
                let now = +new Date()
                if (last && now < last + wait) {
                    clearTimeout(deferTimer)
                    deferTimer = setTimeout(() => {
                        last = now
                        func.apply(this, args)
                    }, wait)
                } else {
                    last = now
                    func.apply(this, args)
                }
            }
        }
        document.querySelector(".inputEl2").addEventListener('input', throttle((e) => {
            console.log(e.target.value, 111)
        }, 1000))
    </script>
</body>

</html>